<template>
  <div>
    <div class="_cropper_main">
      <div class="_cropper">
        <vue-cropper
          ref="cropper"
          :img="option.img"
          :outputSize="option.size"
          :outputType="option.outputType"
          :info="option.info"
          :full="option.full"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :original="option.original"
          :autoCrop="option.autoCrop"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          :fixedBox="option.fixedBox"
          @realTime="realTime"
        ></vue-cropper>
      </div>
      <!--       -->
      <div :style="previews.div" class="_preview">
        <img :src="previews.url" :style="previews.img">
      </div>
    </div>
    <div class="_cropper_action">
      <my-upload-base64 v-model="option.img" style="margin-top: 20px;display: inline-block;margin-left: 60px;"></my-upload-base64>
      <span style="margin-left: 45px" v-show="option.img">
        <my-button type="primary" circle size="small" icon="el-icon-plus" @click="changeScale(1)"></my-button>
        <my-button type="primary" circle size="small" icon="el-icon-minus" @click="changeScale(-1)"></my-button>
        <my-button type="primary" circle size="small" icon="el-icon-download" @click="down('blob')"></my-button>
        <my-button type="primary" circle size="small" icon="el-icon-refresh-left" @click="rotateLeft"></my-button>
        <my-button type="primary" circle size="small" icon="el-icon-refresh-right" @click="rotateRight"></my-button>
      </span>
    </div>
  </div>
</template>

<script>
  import MyUploadBase64 from "../my-upload-base64";
  import { VueCropper } from 'vue-cropper'
  export default {
    // 头像上传组件
    name: "my-cropper",
    model: {
      prop: 'value',
      event: 'change'
    },
    props:{
      value: {
        type: String
      }
    },
    components: {
      'MyUploadBase64': MyUploadBase64,
      'VueCropper': VueCropper
    },
    data(){
      return{
      //   名称 | 功能 | 默认值 | 可选值
      // --- | --- | --- | ---
      //   img | 裁剪图片的地址 | 空 | `url 地址`, `base64`, `blob`
      // outputSize | 裁剪生成图片的质量 | `1` | 0.1 ~ 1
      // outputType | 裁剪生成图片的格式 | jpg (jpg 需要传入jpeg) | `jpeg`, `png`, `webp`
      // info | 裁剪框的大小信息 | `true` | `true`, `false`
      // canScale | 图片是否允许滚轮缩放 | `true` | `true`, `false`
      // autoCrop | 是否默认生成截图框 | `false` | `true`, `false`
      // autoCropWidth | 默认生成截图框宽度 | 容器的 80% | 0 ~ max
      // autoCropHeight | 默认生成截图框高度 | 容器的 80% | 0 ~ max
      // fixed | 是否开启截图框宽高固定比例 | `false` | `true`, `false`
      // fixedNumber | 截图框的宽高比例 | `[1, 1]` | `[ 宽度 ,  高度 ]`
      // full | 是否输出原图比例的截图 | `false` | `true`, `false`
      // fixedBox | 固定截图框大小 | 不允许改变 | `false` | `true`, `false`
      // canMove | 上传图片是否可以移动 | `true` | `true`, `false`
      // canMoveBox | 截图框能否拖动 | `true` | `true`, `false`
      // original | 上传图片按照原始比例渲染 | `false` | `true`, `false`
      // centerBox | 截图框是否被限制在图片里面 | `false` | `true`, `false`
      // high | 是否按照设备的dpr 输出等比例图片 | `true` | `true`, `false`
      // infoTrue | true 为展示真实输出图片宽高 `false` 展示看到的截图框宽高 | false | `true`, `false`
      // maxImgSize | 限制图片最大宽度和高度 | `2000` | 0 ~ max
      // enlarge | 图片根据截图框输出比例倍数 | `1` | 0 ~ max(建议不要太大不然会卡死的呢)
      // mode | 图片默认渲染方式 | `contain` | `contain` , `cover`, `100px`, `100%` auto
      option: {
          img: '', // 裁剪图片的地址
          info: true, // 裁剪框的大小信息
          outputSize: 1, // 剪切后的图片质量（0.1-1）
          full: true, // 输出原图比例截图 props名full
          outputType: 'png', // 裁剪生成额图片的格式
          canMove: true,  // 能否拖动图片
          original: false,  // 上传图片是否显示原始宽高
          canMoveBox: false,  // 能否拖动截图框
          autoCrop: true, // 是否默认生成截图框
          autoCropWidth: 150,
          autoCropHeight: 150,
          fixedBox: true, // 截图框固定大小
          centerBox: true,
          mode: 'auto'
        },
        previews: {}
      }
    },
    methods:{
      /** 实时预览 **/
      realTime(data){
        this.previews = data;
        this.$refs.cropper.getCropData(data => {
          this.$emit('change',data)
        })
      },
      /** 缩放 **/
      changeScale(num) {
        num = num || 1;
        this.$refs.cropper.changeScale(num);
      },
      /** 左旋转 **/
      rotateLeft() {
        this.$refs.cropper.rotateLeft();
      },
      /** 右旋转 **/
      rotateRight() {
        this.$refs.cropper.rotateRight();
      },
      /** 下载 **/
      down(type) {
        let aLink = document.createElement('a')
        aLink.download = 'author-img'
        if (type === 'blob') {
          this.$refs.cropper.getCropBlob((data) => {
            aLink.href = window.URL.createObjectURL(data)
            aLink.click()
          })
        } else {
          this.$refs.cropper.getCropData((data) => {
            aLink.href = data;
            aLink.click()
          })
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  ._cropper {
    width: 200px;
    height: 200px;
  }
  ._preview {
    width: 150px;
    height: 150px;
    margin-top: 25px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background-color: #ccc;
    overflow: hidden;
  }
  ._cropper_main{
    text-align: center;
    display: grid;
    grid-template-columns: 230px 180px 50px;
    div{
      /*border: black 1px solid;*/
    }
  }
  ._cropper_action{
    button{
      margin-top: 10px;
      margin-left: 15px;
    }
  }
</style>
